.component-doc{
  padding-right: 12rem;
  .component-name{
    margin-bottom: 0.75rem;
  }
  .component-description{
    font-size: 0.875rem;
  }
  .code-demonstration-container{
    margin-top: 2rem;
  }
  .api-container{
    margin-top: 3rem;
    h3{
      margin-bottom: 1rem;
    }
  }
  .code-demonstration-h2,
  .api-h2{
    margin-bottom: 1.5rem;
  }
  .api-table{
    border: 1px solid #dee2e6;
    margin-bottom: 2.5rem;
    th{
      white-space: nowrap;
    }
    td{
      word-break: break-all;
      word-wrap: break-word;
      &:first-child{
        white-space: nowrap;
      }
      &:nth-child(2) {
        min-width: 200px;
      }
      &:nth-child(3){
        min-width: 140px;
      }
    }
  }
}

.anchor-nav{
  position: fixed;
  right: 1rem;
  top: 6rem;
  padding-left: 0.25rem;
  max-height: calc(100vh - 7rem);
  min-width: 12rem;
  //border-left: 1px solid var(--primary);
  overflow-y: auto;
  font-size: 0.75rem;

  ul{
    position: relative;
    padding: 0.25rem 0;
    margin: 0;
    list-style: none;
    background-color: #f9f9f9;
    &::before{
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 100%;
      content: ' ';
      opacity: 0.4;
      background-color: var(--primary);
    }
  }
  li{
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    //margin-bottom: 0.25rem;
    transition: color 0.2s,background-color 0.2s;
    cursor: pointer;
    &:hover{
      color: var(--primary);
    }
    &.is-active{
      color: #fff;
      background-color: var(--primary);
    }
  }
  /*.anchor-nav-active-dot{
    position: absolute;
    left: 0;
    z-index: 100;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--primary);
    transition: top .2s ease-in;
  }*/
}

@media (max-width: 1100px) {
  .anchor-nav{
    display: none;
  }
  .component-doc{
    padding-right: 0;
  }
}
